<template>
  <div class="app-container">
  	<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input clearable style="width: 240px" v-model="queryParams.search.mobileNum" placeholder="客户手机号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      v-loading="loading"
      @selection-change="handleSelectionChange"
      style="width: 100%;">
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column type="index" label="序号" width="60"></el-table-column>
      <el-table-column label="头像" align="center">
        <template slot-scope="scope">
          <image-preview :src="scope.row.avatarUrl" hasHttp/>
        </template>
      </el-table-column>
	  <el-table-column prop="name" label="客户姓名" align="center" :show-overflow-tooltip="true" />
	  <el-table-column prop="mobile" label="手机号" align="center" :show-overflow-tooltip="true" />
	  <el-table-column prop="nickName" label="昵称" align="center" :show-overflow-tooltip="true" />
	  <el-table-column prop="createTime" label="创建时间" align="center" :show-overflow-tooltip="true" />
    <el-table-column label="状态" align="center" prop="status">
      <template slot-scope="scope">
        <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
      </template>
    </el-table-column>
    <el-table-column label="性别" align="center" prop="sex">
      <template slot-scope="scope">
        <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
      </template>
    </el-table-column>
	  <el-table-column prop="locationId" label="地址" align="center" :show-overflow-tooltip="true" />
    <el-table-column prop="remark" label="备注" align="center" :show-overflow-tooltip="true" />
      <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width" >
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="preview(scope.row)"
            v-hasPermi="['business:driver:list']">查看</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" disabled >修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getDataList"
    />


    <el-dialog title="客户信息" :visible.sync="showInfo" width="60%">
      <el-descriptions :column="3">
        <el-descriptions-item label="姓名">{{info.name||'未知'}}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{info.mobile}}</el-descriptions-item>
        <el-descriptions-item label="昵称">{{info.nickName||'未知'}}</el-descriptions-item>
        <el-descriptions-item label="性别">{{info.sex==1?'男':'女'}}</el-descriptions-item>
      </el-descriptions>
      <div class="driver_data">
        <div class="date">
          <el-select  v-model="query.search.status" size="mini" placeholder="订单状态" clearable>
            <el-option v-for="i in statusList" :key="i.value" :label="i.label"
              :value="i.value" />
          </el-select>
          <div class="margin_right"></div>
          <el-date-picker
            v-model="dataDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            size="mini"
            value-format="yyyy-MM-dd"
            @change="onDateChange"
            end-placeholder="结束日期">
          </el-date-picker>
          <div class="margin_right"></div>
          <el-button size="mini" type="primary" @click="getOrder">查询</el-button>
          <el-button size="mini" @click="refreshQuery">重置</el-button>
        </div>
        <el-tabs v-model="activeName" class="tab_title">
          <el-tab-pane label="订单记录" name="1">
            <el-table :data="orderList" style="width: 100%" height="400">
              <el-table-column prop="orderNumber" label="订单编号" align="center" :show-overflow-tooltip="true" />
                <el-table-column label="状态" align="center" prop="status">
                  <template slot-scope="scope">
                    <el-tag type="info" v-if="scope.row.status == 10">未支付</el-tag>
                    <el-tag type="warning" v-if="scope.row.status == 20">待发货</el-tag>
                    <el-tag  v-if="scope.row.status == 30">待收货</el-tag>
                    <el-tag type="success" v-if="scope.row.status == 40">已完成</el-tag>
                    <el-tag type="info" v-if="scope.row.status == 50">已取消</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="createTime" label="下单时间" align="center" :show-overflow-tooltip="true" />
                <el-table-column prop="meetAmount" label="应付金额" align="right" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    {{scope.row.meetAmount.toFixed(2)}}
                  </template>
                </el-table-column>
                <el-table-column prop="paidAmount" label="实付金额" align="center" :show-overflow-tooltip="true">
                  <template slot-scope="scope">
                    {{scope.row.paidAmount.toFixed(2)}}
                  </template>
                </el-table-column>
                <el-table-column prop="franchiseeName" label="加盟商" align="left" :show-overflow-tooltip="true" />
            </el-table>
            <pagination
                  v-show="orderTotal>0"
                  :total="orderTotal"
                   layout="prev, pager, next"
                  :page.sync="query.pageNum"
                  :limit.sync="query.pageSize"
                  @pagination="getOrder"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showInfo = false">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>
<script>
  import { page, deleteById, addOrUpdate} from "@/api/business/client";
    import { page as getOrder } from "@/api/business/orderinfo";
  import AddOrUpdate from './addOrUpdate'
  export default {
    dicts:['sys_normal_disable','sys_user_sex','order_status'],
    data () {
      return {
        showInfo:false,
        orderList:[],
        dataDate:[],
        activeName:'1',
        info:{},
        orderTotal:0,
        statusList:[{
            label:'未支付',
            value:'10'
          },
          {
            label:'支付成功（待发货）',
            value:'20'
          },
          {
            label:'待收货',
            value:'30'
          },
          {
            label:'已完成',
            value:'40'
          },
          {
            label:'已取消',
            value:'50'
          },],
      	loading: true,
      	// 选中数组
      	ids: [],
      	// 非单个禁用
      	single: true,
      	// 非多个禁用
      	multiple: true,
      	// 显示搜索条件
      	// 总条数
      	total: 0,
      	//表格数据
      	dataList:[],
      	// 弹出层标题
      	title: "",
      	// 表单参数
      	// 显示搜索条件
        showSearch: true,
      	form: {},
      	// 日期范围
      	dateRange: [],
      	queryParams: {
	        pageNum: 1,
	        pageSize: 10,
          search:{},
	    },
      query: {
	        pageNum: 1,
	        pageSize: 7,
          search:{
            status:'',
            startDate:'',
            endDate:''
          },
	    },
      dataList: [],
      rules: {
      },
      addOrUpdateVisible: false
      }
    },
    components: {
      AddOrUpdate
    },
    created() {
	    this.getDataList();
	    this.initPage();
  	},
    methods: {
      initPage(){

      },
      refreshQuery(){
        this.query.search = {
          clientId:this.query.search.clientId
        }
        this.dataDate = []
        this.getOrder()
      },
      onDateChange(e){
        
        this.query.search.startDate = this.dataDate[0];
        this.query.search.endDate = this.dataDate[1];
      },
      preview(e) {
        this.info = e;
        this.showInfo = true;
        this.query.search.clientId = e.id;
        this.getOrder(e.id);
      },
      getOrder(e) {
        
        getOrder(this.query).then(res => {
          this.orderTotal = parseInt(res.data.total);
          this.orderList = res.data.list
        })
      },
      // 获取数据列表
      getDataList () {
      	this.loading = true;
      	page(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
	          this.dataList = response.data.list;
	          this.total = parseInt(response.data.total);
	          this.loading = false;
          }
      	).catch(res=>{
          this.loading=false
        });
      },
      /** 搜索按钮操作 */
	  handleQuery() {
	      this.queryParams.pageNum = 1;
	      this.getDataList();
	  },
      // 多选框选中数据
	  handleSelectionChange(selection) {
	      this.ids = selection.map(item => item.userId);
	      this.single = selection.length != 1;
	      this.multiple = !selection.length;
	  },
      /** 新增按钮操作 */
	  handleAdd() {
	      this.addOrUpdateVisible = true;
	      this.title = "添加";
	      this.$nextTick(() => {
          	this.$refs.addOrUpdate.init({})
          })
	  },
	  /** 修改按钮操作 */
	   handleUpdate(row) {
	      this.addOrUpdateVisible = true;
	      this.title = "修改";
	      this.$nextTick(() => {
          	this.$refs.addOrUpdate.init(row)
          })
	   },
      /** 删除按钮操作 */
	  handleDelete(row) {
	      const ids = row.id || this.ids;
	      this.$modal.confirm('确定要删除选中的数据项？').then(function() {
	        return deleteById(ids);
	      }).then(() => {
	        this.getDataList();
	        this.$modal.msgSuccess("删除成功");
	      }).catch(() => {});
	  },
	  resetQuery(){
	      this.dateRange = [];
	      this.resetForm("queryForm");
	      this.queryParams={
		        pageNum: 1,
		        pageSize: 10
		  };
	      this.getDataList()
    }
	}
  }
</script>
<style lang="scss" scoped>
.driver_data{
  position: relative;

  .date{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    display: flex;
    align-items: center;
  }
}
.margin_right{
  margin-right: 10px;
}
</style>
